<template>
  <div class="video">
    <!-- 歌单列表选择nav -->
    <div class="typeNavBox">
      <typeNav
        :hotTagTop="hotTagTop"
        :hotType="hotType"
        @updataHotTagTop="updataHotTagTop"
      ></typeNav>
      <navBar
        @updataHotTagTop="updataHotTagTop"
        :hotTagList="hotTagList"
        :top="hotTagTop"
      ></navBar>
    </div>
    <MvCardItem
      v-if="videoList"
      :videoListArray="videoList"
      @clickMvItem="clickMvItem"
      @bottomLoad="bottomLoad"
      :videoType="'video'"
      :isLoad="true"
    ></MvCardItem>
  </div>
</template>
<script>
import {
  getVideoCategory,
  getVideoCategoryTag,
  getVideoList
} from '@/api/video/video'
import navBar from '@/views/Discover/disCoverChildren/musicListChildren/components/navBar.vue'
import typeNav from '@/views/Discover/disCoverChildren/musicListChildren/components/typeNav.vue'
import MvCardItem from '@/views/singerDetail/components/MvCardItem.vue'
export default {
  data() {
    return {
      // 当前标签
      hotTagTop: {},
      hotType: [], // 热门分类
      hotTagList: [], // 热门推荐列表
      // 是否还有更多视频数据
      hasMore: true,
      // 视频列表数据
      videoList: [],
      // 当前视频页数
      videoPage: 1
    }
  },
  components: {
    navBar,
    typeNav,
    MvCardItem
  },
  methods: {
    // 请求视频分类
    async getVideoCategory() {
      let res = await getVideoCategory()
      this.hotTagList = res.data.data
      this.hotTagTop = res.data.data[0]
      // console.log(this.hotTagTop)
    },
    // 获取视频分类tag
    async getSortList() {
      let res = await getVideoCategoryTag()
      // console.log(res);
      // console.log(res.data.data);
      this.hotType = res.data.data
    },
    // 修改选择的分类
    async updataHotTagTop(item) {
      // console.log(item.id)
      this.hotTagTop = item
      this.videoPage = 1
      this.videoList = []
      this.getVideoList(item.id)
    },
    // 获取视频列表
    // 这个接口一次只能获取8条数据, 所以我每次请求循环2次这个请求 拿16条数据
    // 因为是每次8条数据push进去的 push了前 8条时因为高度不够，触发了组件video-list-card的触底，
    // 又调用了一次请求，所以第一次请求会请求32条数据，后面高度够了都是一次请求16条，我觉得挺好的，就不理这个bug了
    async getVideoList(id) {
      // console.log(id)
      let i = 2
      while (i) {
        if (this.hasMore) {
          let res = await getVideoList({
            id,
            offset: 8 * (this.videoPage - 1)
          })
          // console.log(res)
          this.hasMore = res.data.hasmore
          this.videoList.push(...res.data.datas)
          this.videoPage += 1
          i--
        } else {
          return
        }
      }
      // console.log(this.videoList);
    },
    // 上拉触底的回调
    bottomLoad() {
      // console.log(this.hotTagTop.id)
      if (this.hasMore && this.hotTagTop.id) {
        this.getVideoList(this.hotTagTop.id)
      }
    },
    // 跳转mv
    clickMvItem(id) {
      if (!this.$store.state.isLogin) {
        this.$message.error('登录后才能观看MV哦!')
        return
      }
      // console.log(id, index, type)
      this.$router.push({
        path: '/index/VideoDetail',
        query: { id, type: 'video' }
      })
    }
  },
  async created() {
    await this.getSortList()
    await this.getVideoCategory()
    await this.getVideoList(this.hotTagTop.id)
    // console.log(this.hotTagTop.id, 123)
  },
  async mounted() {}
}
</script>
<style lang="scss" scoped>
// 歌单分类
.typeNavBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
// 歌单列表
.songItemBox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  height: 100%;
  .songItem {
    flex: 18%;
    // min-width: 217px;
    max-width: 217px;
    margin-right: 20px;
    cursor: pointer;
    margin-bottom: 15px;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}
</style>
